<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/userProfiles.css">
    <link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        $(function () {
            var params = getParams();
            var fans;
            //游记总数




            if (params.authorId) {
                $.get("users/" + params.authorId + "/travels", {pageSize: 0}, function (data) {
                    $("#hangs").html(data.total)
                });

                //把authorId存起来,再私信的页面取出来
                sessionStorage.setItem("receiverId", JSON.stringify(params.authorId));
                $.get("users/" + params.authorId, function (data) {
                    fans = data.fans;
                    $('.info').renderValues(data);
                    $('.bg').css('background-image', 'url("' + data.coverImgUrl + '")');
                })

                var user = JSON.parse(sessionStorage.getItem("user"));
                if (user) {
                    //先判断是否已经关注了

                    $.get("/users/" + params.authorId + "/fans", function (data) {
                        if (data.length != 0) {
                            $('#followBtn').html("取消关注")
                        }
                    })
                }

                //点击关注,粉丝加一
                $("#followBtn").click(function () {
                    if (user) {
                        $.ajax({
                            url: "/users/" + params.authorId + "/fans",
                            type: "PUT",
                            success: function (data) {
                                if (data.success) {
                                    fans = fans + 1;

                                    $(document).dialog({
                                        type: 'confirm',
                                        style: 'ISO',
                                        titleShow: false,
                                        content: '已关注',
                                        buttons: [
                                            {
                                                name: '确认',
                                                callback: function () {
                                                    $('#followBtn').html("取消关注")
                                                }
                                            }
                                        ]
                                    });
                                    $('#follower').html(fans);
                                } else {
                                    fans = fans - 1;
                                    $(document).dialog({
                                        type: 'confirm',
                                        style: 'ISO',
                                        titleShow: false,
                                        content: '你要取消关注吗',
                                        onClickConfirmBtn: function () {
                                            $.ajax({
                                                url: "/users/" + params.authorId + "/fans",
                                                type: "DELETE",
                                                success: function (data) {
                                                    if (data.success) {
                                                        $('#followBtn').html("关注");
                                                        $('#follower').html(fans);
                                                    }
                                                }
                                            })
                                        }
                                    });
                                }
                            }
                        })
                    } else {
                        $(document).dialog({
                            type: 'confirm',
                            style: 'ISO',
                            titleShow: false,
                            content: '亲,要先登录哦',
                            onClickConfirmBtn: function () {
                                window.location.href = "/login.html";
                            }
                        });

                    }
                });


            }
            //页面滚动的实现,首先我们需要获取当前页的标签
            var currentInput = $('#currentPage');
            //因为我们手机滚动之前的数据就没有了,只有当前查出来的不合理
            var arr = [];
            var pages = 1;

            function query() {
                //获取当前页
                var currentPage = currentInput.val();
                //他的游记的实现
                $.get("users/" + params.authorId + "/travels", {
                    pageSize: 3,
                    currentPage: currentPage
                }, function (data) {
                   // $("#hangs").html(data.total)
                    pages = data.pages;
                    //把两个数组的数据合并在一起,就可以滚动了
                    $.merge(arr, data.list);
                    var json = {
                        list: arr
                    }
                    $('#travels').renderValues(json, {
                        getHref: function (item, value) {
                            var href = $(item).data("href");
                            $(item).attr("href", href + value);
                        }
                    });
                })

                currentInput.val(parseInt(currentPage) + 1);
            }

            query();
            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                    var val = currentInput.val();
                    if (val <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经加载到底了!!!',
                            autoClose: 1000
                        });
                    }
                }
            });

            //私信的跳转
            $('#letterBtn').click(function () {
                if (user) {
                    window.location.href = '/mine/private_message.html';
                } else {
                    $(document).dialog({
                        type: 'confirm',
                        style: 'ISO',
                        titleShow: false,
                        content: '亲,要先登录哦',
                        onClickConfirmBtn: function () {
                            window.location.href = "/login.html";
                        }
                    });
                }
            });

       $("#comments-tab").click(function () {

            //他的点评的实现
            $.get("strategies/users/" + params.authorId + "/comments", function (data) {
                $("#xing").html(data.total)
                pages = data.pages;
                var arr2=[];
                currentPage=1;
                //把两个数组的数据合并在一起,就可以滚动了
                $.merge(arr2, data.list);
                var json = {
                    list: arr2
                }
                $('#comments').renderValues(json, {
                    getHref: function (item, value) {
                        var href = $(item).data("href");
                        $(item).attr("href", href + value);
                    },
                    getStar: function (item, value) {
                        var starhtml = '';
                        var unStarhtml = '';
                        var value = parseInt(value);
                        for (let i = 0; i < value; i++) {
                            starhtml += '<i class="fa fa-star"></i>';
                        }
                        for (let i = 0; i < 5 - value; i++) {
                            unStarhtml += '<i class="fa fa-star-o"></i>';
                        }
                        $(item).html(starhtml + unStarhtml);
                    },
                    getImgUrls: function getImgUrls(item, value) {
                        var split = value.split(";");
                        var temp = "";
                        for (var i = 0; i < split.length - 1; i++) {
                            temp += '<li><img data-src="' + split[i] + '" src="' + split[i] + '" class="imgBtn"></li>';
                        }
                        $(item).html(temp);

                    }
                });

            });
       })

        })
    </script>
</head>
<body>
<div class="container bg">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName"></p>
            <p render-html="sign"></p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div>
                        <span render-html="follow" id="following"></span>
                    </div>
                    <div>
                        <span>关注</span>
                    </div>
                </div>
                <div class="col-2">
                    <div>
                        <span render-html="fans" id="follower"></span>
                    </div>
                    <div>
                        <span>粉丝</span>
                    </div>
                </div>
                <div class="col">
                    <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                    <button class="btn btn-success ibtn" id="followBtn">关注</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span id="hangs"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评[<span id="xing"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单[<span>0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">
            <div render-loop="list">
                <dl class="list">
                    <dd>
                        <a data-href="travelContent.html?id=" render-key="list.id" render-fun="getHref">
                            <img render-src="list.coverUrl">
                            <p><span class="title" render-html="list.title"></span>
                                <span class="span-right"><span render-html="list.likeCount"></span> <i class="fa fa-thumbs-up"></i></span>
                            </p>
                        </a>
                        <hr>
                    </dd>
                </dl>
            </div>
        </div>

        <div class="comment tab-pane fade " id="comments">
            <input type="hidden" name="currentPage" id="currentPage" value="1">
            <input type="hidden" name="pageSize" value="5">
            <input type="hidden" name="rows" value="1">
            <div render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <img class="rounded-circle" render-src="list.user.headImgUrl">
                    </div>
                    <div class="col">
                        <span class="comment-star" render-key="list.starNum" render-fun="getStar"></span>

                        <span class="comment-date" render-html="list.commendTime"></span>
                        <div class="comment-content">
                            <a data-href="strategyComment.html?commentId=" render-key="list.strategy.id" render-fun="getHref">
                                <p render-html="list.content"></p>
                            </a>
                        </div>

                        <ul class="comment-img" render-key="list.imgUrls" render-fun="getImgUrls">
                        </ul>

                        <div class="comment-link">
                            <a data-href="strategyCatalogs.html?strategyId=" render-key="list.strategy.id" render-fun="getHref">
                                <img render-src="list.strategy.coverUrl"> <span
                                    render-html="list.strategy.title"></span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <div class="tab-pane fade" id="pills-contact">.3333..</div>
    </div>
</div>


</body>
</html>